<script lang="ts" setup>
import type { DefaultRow, RoleData } from './types/QueryCondition';
import DescTip from '@/assets/image/desc_tip.svg';
import { InheritedRoleStatus, RoleOrgBool, RoleStatus } from '@/constants/RoleManage';
import { t } from '@/locales';
import { formatTimestampToLocalDateString } from '@/utils/TimeFormatUtil';
import AssignUsersDialog from './components/AssignUsersDialog.vue';
import ColumnDialog from './components/ColumnDialog.vue';
import UserTreeDialog from './components/UserTreeDialog.vue';
import { useSystemAdministrator } from './hooks/UseSystemAdministrator';
import style from './index.module.scss';

defineOptions({
  name: 'RoleManager',
});

const {
  column,
  deleteUser,
  fetchData,
  createData,
  assignUsersClick,
  assignRowData,
  assignProps,
  assignModelValue,
  assignDialogVisible,
  closeAssignDialog,
  saveDialogData,
  openAddAssignUser,
  addUserDialogVisible,
  closeAddUser,
  onAddUserOk,
  requestTreeData,
  enableClick,
  disableClick,
  treeTableRef,
  dialogTitle,
  dialogVisible,
  dialogFormValue,
  dialogDisabled,
  editColumn,
  addActionClick,
  editColumnClick,
  selectedValue,
  assignRolesPageInfo,
  queryAssignUser,
  orgCode,
  dialogMode,
  inheritList,
  deleteRoleData,
  defaultExpandedKeys,
  handleNodeClick,
  assignDialogRef,
  searchData,
  treeClearSearchValue,
  currentNodeKey,
} = useSystemAdministrator();
</script>

<template>
  <div style="width: 100%; height: 100%">
    <AssignUsersDialog
      ref="assignDialogRef"
      v-bind="assignProps"
      :assign-model-value="assignModelValue"
      :table-data="assignRowData"
      :dialog-visible="assignDialogVisible"
      :page-data="assignRolesPageInfo"
      :query-assign-user="queryAssignUser"
      @open-add-assign-user="openAddAssignUser"
      @delete-user="deleteUser"
      @submit-dialog="saveDialogData"
      @close-dialog="closeAssignDialog"
    >
      <template #column-createTime="{ value }">
        <div>{{ value ? formatTimestampToLocalDateString(value) : value }}</div>
      </template>
    </AssignUsersDialog>
    <UserTreeDialog
      :selected-value="selectedValue"
      :title="t('roleManage.addUser')"
      :dialog-visible="addUserDialogVisible"
      :org-code="orgCode"
      @close-dialog="closeAddUser"
      @submit-dialog="onAddUserOk"
    />
    <TreeTablePage
      ref="treeTableRef"
      v-model:tree-current-node-key="currentNodeKey"
      :title="t('roleManage.title')"
      :column="column" select-action add-button use-selection disable-button
      enable-button
      :operations="['edit', 'assignUsers', 'deleteRole']"
      :fetch-data="fetchData"
      :grid="{ minColumns: 1, maxColumns: 2, labelCol: 6, wrapperCol: 10 }"
      :create-data="createData"
      :update-data="createData"
      :delete-data="deleteRoleData"
      :show-search="true"
      :search-tree-config="{
        requestData: requestTreeData,
        searchData,
        nodeKey: 'code',
        lazy: true,
        defaultExpandedKeys,
        expandOnClickNode: false,
        textConfig: {
          searchPlaceholder: t('roleManage.searchPlaceHolder'),
        },
      }"
      search-key="search"
      :external-dialog="true"
      @assign-users-click="assignUsersClick"
      @enable-click="(records: DefaultRow | DefaultRow []) => enableClick(records as RoleData[])"
      @disable-click="(records: DefaultRow | DefaultRow []) => disableClick(records as RoleData[])"
      @add-action-click="addActionClick"
      @edit-column-click="editColumnClick"
      @tree-node-click="handleNodeClick"
      @tree-clear-search-value="treeClearSearchValue"
    >
      <template #column-status="{ value }">
        <el-tag
          :class="[style['use-status-dot-tag'], style[ value === RoleStatus.ROLE_SUCCESS ? 'use-status-dot-tag-success' : 'use-status-dot-tag-error']]"
        >
          {{
            value === RoleStatus.ROLE_SUCCESS ? t("roleManage.status.enable") : t("roleManage.status.disable")
          }}
        </el-tag>
      </template>
      <template #column-subVisible="{ value }">
        {{ value === RoleOrgBool.ROLE_YES ? t("roleManage.yes") : t("roleManage.no") }}
      </template>
      <template #column-orgLevel="{ value }">
        <div>
          {{ value === "CURRENT" ? t("roleManage.current") : t("roleManage.high") }}
        </div>
      </template>
      <template #column-createTime="{ value }">
        <div>{{ value ? formatTimestampToLocalDateString(value) : value }}</div>
      </template>
      <template #column-updateTime="{ value }">
        <div>{{ value ? formatTimestampToLocalDateString(value) : value }}</div>
      </template>
      <template #column-inheritedRoleId="{ row }">
        <div
          :class="style['desc-tip']"
          :style="{ width: row.inheritedRoleStatus === InheritedRoleStatus.EIGHTY_PERCENT ? '80%' : '100%' }"
        >
          <div :class="style['inherited-text']">
            {{
              row.inheritedOrgName && row.inheritedRoleName
                ? `${row.inheritedOrgName}/${row.inheritedRoleName}`
                : row.inheritedRoleName || row.inheritedOrgName
            }}
          </div>
          <div v-if="row.inheritedRoleStatus === InheritedRoleStatus.EIGHTY_PERCENT">
            <el-popover
              :popper-class="style['inherited-pop']"
              placement="bottom"
              trigger="hover"
              :content="t('roleManage.inheritedRoleTip')"
            >
              <template #reference>
                <DescTip />
              </template>
            </el-popover>
          </div>
        </div>
      </template>
    </TreeTablePage>
    <ColumnDialog
      v-model:visible="dialogVisible"
      :dialog-disabled="dialogDisabled"
      :model-value="dialogFormValue"
      :dialog-mode="dialogMode"
      :query-condition="editColumn"
      :title="dialogTitle"
      :grid="{ minColumns: [2, 2], maxColumns: 2, labelCol: 4, wrapperCol: 10 }"
      :inherit-list="inheritList"
      @change="createData"
    />
  </div>
</template>
